<template>
  <div class="recharge-page">
    <p>选择油卡</p>
    <div class="recharge-type">
      <div 
        class="card" 
        :class="{active: 0 === selectTypeIndex}" 
        @click="handleType(0)">
        <h3>{{ cardType[0] }}</h3>
        <h4>{{ webinfo.entity_common_num }}</h4>
        <div class="icon_bg"></div>
        <i class="icon iconfont icon-right"></i>
      </div>
      <div 
        class="card" 
        :class="{active: 1 === selectTypeIndex}"
        @click="handleType(1)">
        <h3>{{ cardType[1] }}</h3>
        <h4>{{ webinfo.virtual_common_num }}</h4>
        <div class="icon_bg"></div>
        <i class="icon iconfont icon-right"></i>
      </div>
    </div>
    <van-cell-group>
      <van-field 
        v-model="cardId" 
        type="digit" 
        maxlength="6"
        label="卡号后6位" 
        placeholder="请输入卡号后6位" >
        <template #button v-if="columns.length">
          <i class="iconfont icon-arrowdown-copy" @click="showPicker = true"></i>
        </template>
      </van-field>
      <van-field 
        type="digit" 
        maxlength="6"
        v-model="confirmCardId" 
        label="确认卡号" 
        placeholder="再次确认卡号后6位" />
    </van-cell-group>
    <div class="input-box">
      <van-field 
        class="gas-input"
        v-model="order_amount" 
        type="number" 
        input-align="center"
        placeholder="在这里输入充值金额"/>
    </div>
    <van-button 
      type="primary" 
      @click="submitOrder"
      color="linear-gradient(to right, #8BC34A, #69a920)"
      block >
      立即充值
    </van-button>
    <div class="tip-box" v-if="webinfo.recharge_tip">
      <p class="title">注意事项：</p>
      <p class="tip-p">{{webinfo.recharge_tip}}</p>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        title="选择卡号"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>

  </div>
</template>

<script>
import { Toast } from 'vant';
import {mapGetters, mapActions} from 'vuex'
import * as Api from 'api'

export default {
  data () {
    return {
      showPicker: false,
      lastNumberList: [],
      columns: [],
      cardType: ['实体卡', '虚拟卡'],
      common_number: '',
      selectTypeIndex: 0,
      cardId: '',
      confirmCardId: '',
      order_amount: '',
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'webinfo'
    ])
  },
  created() {
    this.selectType = this.cardType[0]
    this.$emit('showTabMenu', true);
    this.getCardList()
  },
  methods: {
    ...mapActions([
      'setRechargeGas'
    ]),
    // 获取卡列表
    getCardList() {
      Api.RechargeCardList().then(res => {
        let entity_list = []
        let virtual_list = []
        res.data.entity_list.forEach(item => {
          entity_list.push(item.last_number)
        })
        res.data.virtual_list.forEach(item => {
          virtual_list.push(item.last_number)
        })
        this.lastNumberList = [entity_list, virtual_list]
        this.columns = entity_list
      })
    },
    // 切换卡号类型
    handleType(index) {
      this.selectTypeIndex = index
      // 已存卡列表
      this.columns = this.lastNumberList[index]
      // 清空6位卡号
      this.cardId = ''
      this.confirmCardId = ''
    },
    onConfirm(value, index) {
      this.showPicker = false
      this.cardId = value
      this.confirmCardId = value
    },
    onCancel() {
      this.showPicker = false
    },
    submitOrder() {
      if (!this.cardId) {
        Toast('卡号不能为空！')
        return
      }
      if (this.cardId != this.confirmCardId) {
        Toast('2次输入卡号不一致！')
        return
      }
      if (!this.order_amount) {
        Toast('充值金额不能为空')
        return
      }
      if (this.order_amount > 5000) {
        Toast('单笔金额不能超过5000元')
        return
      }
      let numberList = [this.webinfo.entity_common_num, this.webinfo.virtual_common_num]
      let params = {
        gas_Type: '柴油0#',
        card_type: this.cardType[this.selectTypeIndex],
        common_number: numberList[this.selectTypeIndex],
        last_number: this.cardId,
        order_amount: (Number(this.order_amount) * 100).toFixed(0),
        amount: (Number(this.order_amount) * 100).toFixed(0),
        phone: this.user.phone,
      }
      this.setRechargeGas(params)
      this.$router.push({name: 'RechargeOrder'})
    }
  }
}
</script>

<style lang="less" scoped>
@color: #8BC34A;
@bg: #f5ffe9;

.recharge-page{
  padding: 20px;
}
.recharge-type{
  padding: 10px 0 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  .card{
    position: relative;
    line-height: 0.5rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0.08rem;
    padding: 8px;
    font-size: 14px;
    overflow: hidden;
    height: 50px;
    &.active{
      background: @bg;
      border: 1px solid @color;
      color: @color;
      cursor: unset;
      .icon_bg{
        display: block;
      }
      .icon{
        display: block;
      }
    }
    .icon_bg{
      position: absolute;
      right: -16px;
      top: -16px;
      font-size: 10px;
      background: @color;
      color: #fff;
      width: 32px;
      height: 32px;
      transform: rotate(45deg);
      display: none;
    }
    .icon{
      position: absolute;
      right: -4px;
      top: -4px;
      font-size: 10px;
      color: #fff;
      transform: scale(0.7);
      display: none;
    }

  }
}
.input-box{
  margin-top: 20px;
  height: 56px;
  width: 100%;
  background: @bg;
  border: 1px solid @color;
  border-radius: 5px;
  margin-bottom: 20px;
  .gas-input{
    background: transparent;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 16px;
    /deep/ input{
      line-height: 28px;
      &::-webkit-input-placeholder{
        font-size: 16px;
        font-weight: 400;
      }
    }
  }
}
</style>